<template>
  <div class="demo-flexible">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>当前屏幕信息</span>
            </div>
          </template>
          <div class="info-item">
            <span class="label">屏幕宽度:</span>
            <span class="value">{{ screenWidth }}px</span>
          </div>
          <div class="info-item">
            <span class="label">根元素字体大小:</span>
            <span class="value">{{ rootFontSize }}px</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>自适应演示</span>
            </div>
          </template>
          <div class="demo-box">
            <div class="demo-text">这是一段使用rem单位的文字</div>
            <div class="demo-block"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const screenWidth = ref(window.innerWidth)
const rootFontSize = ref(parseFloat(getComputedStyle(document.documentElement).fontSize))

const updateSize = () => {
  screenWidth.value = window.innerWidth
  rootFontSize.value = parseFloat(getComputedStyle(document.documentElement).fontSize)
}

onMounted(() => {
  window.addEventListener('resize', updateSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateSize)
})
</script>

<style scoped lang="scss">
.demo-flexible {
  .info-item {
    margin-bottom: 10px;
    
    .label {
      color: #909399;
      margin-right: 10px;
    }
    
    .value {
      color: #409EFF;
      font-weight: bold;
    }
  }
  
  .demo-box {
    .demo-text {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    
    .demo-block {
      width: 10rem;
      height: 10rem;
      background-color: #409EFF;
    }
  }
}
</style> 